tag is returned as JavaScript function to the render function
...
Component {
render()
{
return(

{'Welcome to React
world!'}

)
} }
� Back to Top
4
...
Elements can
11

contain other Elements in their props
...

Once an element is created, it is never mutated
...
createElement(
'div',
{id: 'login-btn'},
'Login'
)
The above React
...
render():

Login

Whereas a component can be declared in several different ways
...

In either case, it takes props as an input, and returns a JSX tree as the
output:
const Button = ({ onLogin }) =>

Login

Then JSX gets transpiled to a React
...
createElement(
'div',
{ id: 'login-btn', onClick: onLogin },
'Login'
)
� Back to Top
5
...

1
...
Those are pure JavaScript functions that accept props object
as the first parameter and return React elements:

12

“jsx harmony function Greeting({ message }) {

{Hello, ${message}‘}

return

} “‘
2
...
The above function component can be written as:
jsx harmony
render() {
} }

class Greeting extends React
...
props
...

When to use a Class Component over a Function Component?
If the component needs state or lifecycle methods then use class component otherwise use function component
...
8 with
the addition of Hooks, you could use state , lifecycle methods and other
features that were only available in class component right in your function
component
...

What are Pure Components?
React
...
Component except
that it handles the shouldComponentUpdate() method for you
...
Component on the other hand won’t compare current props and state to next out of the box
...

� Back to Top
8
...
We should always try to make
our state as simple as possible and minimize the number of stateful components
...
Component { constructor(props)
{ super(props)
this
...
state
...
e
...

� Back to Top
9
...
They are single values or objects containing a set of values that are passed to components on creation using a
naming convention similar to HTML-tag attributes
...


14

The primary purpose of props in React is to provide following component
functionality:
1
...

2
...

3
...
props
...

For example, let us create an element with reactProp property:
jsx harmony



This reactProp (or whatever you came up with) name then becomes a
property attached to React’s native props object which originally already
exists on all components created using React library
...
reactProp
� Back to Top
10
...
While both of them
hold information that influences the output of render, they are different
in their functionality with respect to component
...

� Back to Top
11
...

//Wrong
this
...
message = 'Hello world'
Instead use setState() method
...
When state changes, the component responds by rerendering
...
setState({ message: 'Hello World' })
Note: You can directly assign to the state object either in constructor or
using latest javascript’s class field declaration syntax
...

What is the purpose of callback function as an argument of
setState()?
The callback function is invoked when setState finished and the component
gets rendered
...

Note: It is recommended to use lifecycle method rather than this callback
function
...
log('The name has updated and component re-ren
� Back to Top
13
...
In HTML, the event name usually represents in lowercase as a convention:

Whereas in React it follows camelCase convention:
jsx harmony



2
...
log("The link was clicked
...
preventDefault()
console
...
')
}
3
...
(refer
“activateLasers” function in the first point for example)
� Back to Top
14
...
Binding in Constructor: In JavaScript classes, the methods are
not bound by default
...
Normally we bind them in constructor
...
handleClick = this
...
bind(this);
}
handleClick() {
console
...
handleClick}>Click Me;
}
}
2
...

jsx harmony
is:', this)

handleClick = () => {
}

console
...
handleClick}>
me'}

{'Click

3
...

jsx harmony handleClick() {
console
...
handleClick()}>Click Me; }
Note: If the callback is passed as prop to child components, those components might do an extra re-rendering
...
bind() or public class fields syntax approach considering performance
...

How to pass a parameter to an event handler or callback?
You can use an arrow function to wrap around an event handler and pass
parameters:

17

jsx harmony this
...
bind:
jsx harmony ...
bind(this,
id)} /> Apart from these two approaches, you can also pass arguments
to a function which is defined as arrow function jsx harmony onClick={this
...
log("Hello, your ticket number is", id) };
� Back to Top
16
...
Its API is same as the browser’s native event, including
stopPropagation() and preventDefault(), except the events work identically across all browsers
...

What are inline conditional expressions?
You can use either if statements or ternary expressions which are available
from JS to conditionally render expressions
...

jsx harmony

Hello!

{
!isLogin?

unread messages
...


messages
...
length}
:

You

}

� Back to Top
18
...
Key prop helps React identify which items have changed, are
added, or are removed
...
map((todo) =>
key={todo
...
text}
)
18


When you don’t have stable IDs for rendered items, you may use the item
index as a key as a last resort:
jsx harmony const todoItems = todos
...
text}
)
Note:
1
...
This can negatively impact performance and may cause
issues with component state
...
If you extract list item as separate component then apply keys on list
component instead of li tag
...
There will be a warning message in the console if the key prop is not
present on list items
...

What is the use of refs?
The ref is used to return a reference to the element
...

� Back to Top
20
...
This is a recently added approach
...
createRef() method and attached to React elements via the
ref attribute
...

jsx harmony class MyComponent extends React
...
myRef
= React
...
myRef} />
} }
2
...

For example, the search bar component’s input element is accessed as
follows, jsx harmony
class SearchBar extends Component
{
constructor(props) {
super(props);
this
...
state = { term: ''
};
this
...
txtSearch
= e;
}
}
onInputChange(event) {

19

this
...
txtSearch
...
onInputChange
...
state
ref={this
...
Note: You
can also use inline ref callbacks even though it is not a recommended
approach
...

What are forward refs?
Ref forwarding is a feature that lets some components take a ref they
receive, and pass it further down to a child
...
forwardRef((props, ref) =>
( {props
...
createRef(); {‘Forward Ref’} “‘
� Back to Top
22
...
Because
findDOMNode() prevents certain improvements in React in the future
...
scrollIntoView()
}
render() {
return

}
}
The recommended approach is:
class MyComponent extends Component {
constructor(props){
super(props);
this
...
node
...
scrollIntoView();
}
render() {
return

...

Why are String Refs legacy?
If you worked with React before, you might be familiar with an older
API where the ref attribute is a string, like ref={'textInput'}, and the
DOM node is accessed as this
...
textInput
...
String
refs were removed in React v16
...
They force React to keep track of currently executing component
...

2
...
Callback refs are perfectly
composable
...
They don’t work with static analysis like Flow
...
refs, as well as its type (which could be different)
...

4
...
g
...
Ref
will get attached to DataTable rather than MyComponent: return
;
// This would work though! Callback refs are awesome
...


21

What is Virtual DOM?
The Virtual DOM (VDOM) is an in-memory representation of Real DOM
...
It’s a step that happens between the render function being called
and the displaying of elements on the screen
...

� Back to Top
25
...

1
...


Figure 2: vdom
2
...

3
...

� Back to Top
26
...
The Virtual DOM is a concept
implemented by libraries in JavaScript on top of browser APIs
...

22

Figure 3: vdom2

Figure 4: vdom3

23

What is React Fiber?
Fiber is the new reconciliation engine or reimplementation of core algorithm in React v16
...

� Back to Top
28
...
Its headline feature is incremental rendering: the
ability to split rendering work into chunks and spread it out over multiple
frames
...
Ability to split interruptible work in chunks
...
Ability to prioritize, rebase and reuse work in progress
...
Ability to yield back and forth between parents and children to support layout in React
...
Ability to return multiple elements from render()
...
Better support for error boundaries
...

What are controlled components?
A component that controls the input elements within the forms on subsequent user input is called Controlled Component, i
...

For example, to write all the names in uppercase letters, we use handleChange as below,
handleChange(event) {
this
...
target
...
toUpperCase()})
}
� Back to Top
30
...
This is a bit more like traditional HTML
...

“‘jsx harmony class UserProfile extends React
...
handleSubmit = this
...
bind(this)
this
...
createRef() }
handleSubmit(event) { alert(‘A name was submitted:’ + this
...
current
...
preventDefault() }
render() { return (
{‘Name:’}
);
} } “‘
In most cases, it’s recommend to use controlled components to implement
forms
...
The alternative is uncontrolled components, where form data is
handled by the DOM itself
...

What is the difference between createElement and cloneElement?
JSX elements will be transpiled to React
...
Whereas cloneElement is used to clone an element and pass
it new props
...

What is Lifting State Up in React?
When several components need to share the same changing data then it is
recommended to lift the shared state up to their closest common ancestor
...

� Back to Top

25

33
...
Mounting: The component is ready to mount in the browser
DOM
...

2
...

This phase covers getDerivedStateFromProps(), shouldComponentUpdate(),
render(), getSnapshotBeforeUpdate() and componentDidUpdate()
lifecycle methods
...
Unmounting: In this last phase, the component is not needed
and gets unmounted from the browser DOM
...

It’s worth mentioning that React internally has a concept of phases when
applying changes to the DOM
...
Render The component will render without any side effects
...

2
...

3
...

React 16
...
3
� Back to Top
34
...
3
• componentWillMount: Executed before rendering and is used for
App level configuration in your root component
...
4+

Figure 6: phases 16
...

• componentWillReceiveProps: Executed when particular prop
updates to trigger state transitions
...
By default it returns true
...
It is a great place to improve performance
as it allows you to prevent a re-render if component receives new prop
...

• componentDidUpdate: Mostly it is used to update the DOM in
response to prop or state changes
...

React 16
...
This exists for rare use
cases where you need a derived state
...

• componentDidMount: Executed after first rendering and where
all AJAX requests, DOM or state updates, and set up event listeners
should occur
...
By default, it returns true
...
It is a great place to improve
performance as it allows you to prevent a re-render if component
receives a new prop
...
Any value returned by this will be
passed into componentDidUpdate()
...
e
...

• componentDidUpdate: Mostly it is used to update the DOM
in response to prop or state changes
...

• componentWillUnmount It will be used to cancel any outgoing
network requests, or remove all event listeners associated with the
component
...

28

What are Higher-Order Components?
A higher-order component (HOC) is a function that takes a component
and returns a new component
...

We call them pure components because they can accept any dynamically
provided child component but they won’t modify or copy any behavior
from their input components
...

2
...

4
...
As we know, reducers are supposed to return the
initial state when they are called with undefined as the first argument,
no matter the action
...
type === 'USER_LOGOUT') {
state = undefined
}
return appReducer(state, action)
}
In case of using redux-persist, you may also need to clean your storage
...
First, you
need to import the appropriate storage engine and then, to parse the state
before setting it to undefined and clean each storage state key
...
type === 'USER_LOGOUT') {
Object
...
forEach(key => {
storage
...

Whats the purpose of at symbol in the Redux connect decorator?
The **@** symbol is in fact a JavaScript expression used to signify decorators
...

Let’s take an example setting up Redux without and with a decorator
...
/actionCreators'
{ bindActionCreators } from 'redux'
{ connect } from 'react-redux'

function mapStateToProps(state) {
return { todos: state
...
Component {
//
...
/actionCreators'
{ bindActionCreators } from 'redux'
{ connect } from 'react-redux'

function mapStateToProps(state) {
return { todos: state
...
Component {
//
...
The
decorator syntax isn’t built into any JavaScript runtimes yet, and is still
experimental and subject to change
...

� Back to Top
165
...

Whereas Redux is much more powerful and provides a large number of
features that the Context API doesn’t provide
...

� Back to Top
166
...
Therefore, they act as a reducer of state
...
This state is then reduced (or accumulated) based on the action, and
then the next state is returned
...

� Back to Top
167
...


84

Let’s take an example of fetching specific account as an AJAX call using
fetch API :

export function fetchAccount(id) {
return dispatch => {
dispatch(setLoadingAccountState()) // Show a loading spinner
fetch(`/account/${id}`, (response) => {
dispatch(doneFetchingAccount()) // Hide loading spinner
if (response
...
json)) // Use a normal function to set the receive
} else {
dispatch(someError)
}
})
}
}
function setAccount(data) {
return { type: 'SET_Account', data: data }
}
� Back to Top
168
...

� Back to Top
169
...
This pattern is called Higher-Order Components, and is generally
the preferred way of extending a component’s functionality in React
...

Let’s take an example of component using connect:
import { connect } from 'react-redux'
import { setVisibilityFilter } from '
...
/components/Link'
const mapStateToProps = (state, ownProps) => ({
85

active: ownProps
...
visibilityFilter
})
const mapDispatchToProps = (dispatch, ownProps) => ({
onClick: () => dispatch(setVisibilityFilter(ownProps
...

class MyComponent {
someMethod() {
doSomethingWith(this
...
store)
}
}
� Back to Top
170
...

Container is an informal term for a component that is connected to a
Redux store
...

� Back to Top
171
...
It also prevents you from
introducing silly bugs caused by typos – in which case, you will get a
ReferenceError immediately
...
js or
actionTypes
...

export
export
export
export
export
export

const
const
const
const
const
const

ADD_TODO = 'ADD_TODO'
DELETE_TODO = 'DELETE_TODO'
EDIT_TODO = 'EDIT_TODO'
COMPLETE_TODO = 'COMPLETE_TODO'
COMPLETE_ALL = 'COMPLETE_ALL'
CLEAR_COMPLETED = 'CLEAR_COMPLETED'

In Redux, you use them in two places:
1
...
js:
import { ADD_TODO } from '
...
In reducers:
Let’s create reducer
...
/actionTypes'
export default (state = [], action) => {
switch (action
...
state,
{
text: action
...

What are the different ways to write mapDispatchToProps()?
There are a few ways of binding action creators to dispatch() in
mapDispatchToProps()
...

� Back to Top
173
...
So, if you
use a connected component:
“‘jsx harmony import ConnectedComponent from ‘
...

� Back to Top
174
...
Components: Used for dumb components unaware of Redux
...
Containers: Used for smart components connected to Redux
...
Actions: Used for all action creators, where file names correspond
to part of the app
...
Reducers: Used for all reducers, where files name correspond to
state key
...
Store: Used for store initialization
...

� Back to Top

88

175
...

It is available in NPM:
$ npm install --save redux-saga
� Back to Top
176
...
redux-saga is a redux middleware, which means this
thread can be started, paused and cancelled from the main application
with normal Redux actions, it has access to the full Redux application
state and it can dispatch Redux actions as well
...

What are the differences between call() and put() in reduxsaga?
Both call() and put() are effect creator functions
...
put() function creates an effect, which instructs middleware to
dispatch an action to the store
...


function* fetchUserSaga(action) {
// `call` function accepts rest arguments, which will be passed to `api
...
fetchUser, action
...

yield put({
type: 'FETCH_USER_SUCCESS',
userData
})
}

89

� Back to Top
178
...
The thunk can be used to delay the
dispatch of an action, or to dispatch only if a certain condition is met
...

� Back to Top
179
...

In most of the scenarios, Thunk uses Promises to deal with them, whereas
Saga uses Generators
...
But both middleware can coexist, so you can start with
Thunks and introduce Sagas when/if you need them
...

What is Redux DevTools?
Redux DevTools is a live-editing time travel environment for Redux with
hot reloading, action replay, and customizable UI
...

� Back to Top
181
...
Lets you inspect every state and action payload
...
Lets you go back in time by cancelling actions
...
If you change the reducer code, each staged action will be reevaluated
...
If the reducers throw, you will see during which action this happened,
and what the error was
...
With persistState() store enhancer, you can persist debug sessions
across page reloads
...

What are Redux selectors and why to use them?
Selectors are functions that take Redux state as an argument and return
some data to pass to the component
...
user
...
The selector can compute derived data, allowing Redux to store the
minimal possible state
2
...

What is Redux Form?
Redux Form works with React and Redux to enable a form in React to
use Redux to store all of its state
...

� Back to Top
184
...
Field values persistence via Redux store
...
Validation (sync/async) and submission
...
Formatting, parsing and normalization of field values
...

How to add multiple middlewares to Redux?
You can use applyMiddleware()
...

How to set initial state in Redux?
You need to pass initial state as second argument to createStore:
const rootReducer = combineReducers({
todos: todos,
visibilityFilter: visibilityFilter
})
const initialState = {
todos: [{ id: 123, name: 'example', completed: false }]
}
const store = createStore(
rootReducer,
initialState
)
� Back to Top
187
...
The main
difference is that relay only manages state originated from the server, and
all access to the state is used via GraphQL queries (for reading data)
and mutations (for changing data)
...

188
...
They are the only source of
information for the store
...

For example, let’s take an action which represents adding a new todo item:
92

{
type: ADD_TODO,
text: 'Add todo item'
}
� Back to Top

React Native
� Back to Top
188
...

React Native is a mobile framework that compiles to native app components, allowing you to build native mobile applications (iOS, Android,
and Windows) in JavaScript that allows you to use React to build your
components, and implements React under the hood
...

How to test React Native apps?
React Native can be tested only in mobile simulators like iOS and Android
...
io)
Where it syncs using QR code, your mobile and computer should be in
same wireless network
...

How to do logging in React Native?
You can use console
...
warn, etc
...
29
you can simply run the following to see logs in the console:
$ react-native log-ios
$ react-native log-android
� Back to Top
191
...
Run your application in the iOS simulator
...
Press Command + D and a webpage should open up at http://localhost:8081/debugger-ui
...
Enable Pause On Caught Exceptions for a better debugging experience
...
Press Command + Option + I to open the Chrome Developer tools,
or open it via View -> Developer -> Developer Tools
...
You should now be able to debug as you normally would
...

What is reselect and how it works?
Reselect is a selector library (for Redux) which uses memoization concept
...

Reselect keeps a copy of the last inputs/outputs of the last call, and recomputes the result only if one of the inputs changes
...

It’s memoization and cache are fully customizable
...

What is Flow?
Flow is a static type checker designed to find type errors in JavaScript
...
For example, Flow helps you catch errors involving
null, unlike most type systems
...

What is the difference between Flow and PropTypes?
Flow is a static analysis tool (static checker) which uses a superset of the
language, allowing you to add type annotations to all of your code and
catch an entire class of bugs at compile time
...
It can’t check anything other than the types of
the props being passed to a given component
...

� Back to Top
195
...
Install font-awesome:
$ npm install --save font-awesome
2
...
js file:
import 'font-awesome/css/font-awesome
...
css'
3
...

What is React Dev Tools?
React Developer Tools let you inspect the component hierarchy, including
component props and state
...

The official extensions available for different browsers or environments
...
Chrome extension
2
...
Standalone app (Safari, React Native, etc)
� Back to Top
197
...
) then you
must first open Chrome Extensions and check Allow access to file
URLs
...

How to use Polymer in React?
You need to follow below steps to use Polymer in React,
1
...
/bower_components/polymer/polymer
...
textContent = 'I am a calender'
} })
2
...
g
...
html of your React
application:

3
...
Component {
render() {
return (

)
}
}
export default MyComponent
� Back to Top
199
...
js?
React has the following advantages over Vue
...

2
...

4
...

Easier to test
...

More information and solutions available
...
But they are helpful as base parameters
...

What is the difference between React and Angular?
Let’s see the difference between React and Angular in a table format
...
e it has
two-way data binding between children
and parent and hence debugging is often
difficult

Note: The above list of differences are purely opinionated and it vary based on
the professional experience
...

� Back to Top
201
...
If the
website is not using React or if React fails to communicate with DevTools
then it won’t show up the tab
...

What are Styled Components?
styled-components is a JavaScript library for styling React applications
...

97

� Back to Top
203
...

import React from 'react'
import styled from 'styled-components'
// Create a
� Back to Top
204
...

� Back to Top
205
...
1
...
i
...
You
can just pass --typescript option as below

98

npx create-react-app my-app --typescript
# or
yarn create react-app my-app --typescript
But for lower versions of react scripts, just supply --scripts-version
option as react-scripts-ts while you create a new project
...

Now the project layout should look like the following:
my-app/
��
...
d
...

�� package
...
json
�� tsconfig
...
json
�� tsconfig
...
json
�� tslint
...

What are the main features of Reselect library?
Let’s see the main features of Reselect library,
1
...

2
...
A selector is not recomputed unless one of its
arguments changes
...
Selectors are composable
...

207
...
shop
...
shop
...
reduce((acc, item) => acc + item
...
20 },
{ name: 'orange', value: 0
...
log(subtotalSelector(exampleState)) // 2
...
log(taxSelector(exampleState))
// 0
...
log(totalSelector(exampleState))
// { total: 2
...

Does the statics object work with ES6 classes in React?
No, statics only works with React
...
createClass({
statics: {
someMethod: function() {

100

//
...
Component {
static propTypes = {
//
...

}
}
or writing them outside class as below,
class Component extends React
...

}
Component
...
}
Component
...
}
� Back to Top
210
...
The most common
usage is with React and React Native, but there are bindings available
for Angular, Angular 2, Vue, Mithril, and more
...

� Back to Top
211
...
You should be able to use it regardless of your
JavaScript build process
...

� Back to Top
212
...

const InitializeFromStateForm = reduxForm({
form: 'initializeFromState',
enableReinitialize : true
})(UserEdit)
If your initialValues prop gets updated, your form will update too
...

How React PropTypes allow different types for one prop?
You can use oneOfType() method of PropTypes
...
propTypes = {
size: PropTypes
...
string,
PropTypes
...

Can I import an SVG file as react component?
You can import SVG directly as component instead of loading it as a file
...
0
...

“‘jsx harmony import { ReactComponent as Logo } from ‘
...
svg’
const App = () => (
{/* Logo is an actual react component */}

) “‘
Note: Don’t forget about the curly braces in the import
...


102

Why are inline ref callbacks or functions not recommended?
If the ref callback is defined as an inline function, it will get called twice
during updates, first with null and then again with the DOM element
...

class UserForm extends Component {
handleSubmit = () => {
console
...
input
...
handleSubmit}>
type='text'
ref={(input) => this
...
One quick fix is to use the ES7 class property syntax
to define the function
class UserForm extends Component {
handleSubmit = () => {
console
...
input
...
input = input
}
render () {
return (

...
setSearchInput} /> // Access DOM input in handle submit

Submit

)

103

}
}
**Note:** In React v16
...

What is render hijacking in react?
The concept of render hijacking is the ability to control what a component
will output from another component
...
By wrapping,
you can inject additional props or make other changes, which can cause
changing logic of rendering
...

� Back to Top
217
...

1
...
Inheritance Inversion (II)
...

Props Proxy
In this approach, the render method of the HOC returns a React Element
of the type of the WrappedComponent
...
In React Router v4(version 4), the API is completely about
components
...

2
...
The router module will take
care history by wrapping routes with component
...
The application size is reduced by adding only the specific router
module(Web, core, or native)
� Back to Top
231
...
The method receives two parameters,
1
...
info: - An object with a componentStack key contains the information
about which component threw the error
...

In which scenarios error boundaries do not catch errors?
Below are the cases in which error boundaries doesn’t work,
1
...
Asynchronous code using setTimeout or requestAnimationFrame callbacks
3
...
When errors thrown in the error boundary code itself
� Back to Top
233
...

React doesn’t need error boundaries to recover from errors in event handlers
...
So if they throw, React still knows what
to display on the screen
...
Component {
constructor(props) {
super(props);
this
...
handleClick = this
...
bind(this);
}
handleClick() {
try {
// Do something that could throw
} catch (error) {
this
...
state
...